import PocketBase from "../pocketbase.es.js";
import { _dialog, _pagination } from "../utils/functions.js";

const pb = new PocketBase("http://127.0.0.1:8090");
const html = String.raw;

function renderUsersTable(data = []) {
  return html`
    <table class="table">
      <thead>
        <tr>
          <th>
            <input
              data-action="checkAll"
              type="checkbox"
              class="form-check-input"
            />
          </th>
          <th>用户名</th>
          <th>邮箱</th>
          <th>姓名</th>
          <th>头像</th>
          <th>手机</th>
          <th>性别</th>
          <th>部门</th>
          <th>年龄</th>
          <th>创建时间</th>
          <th>修改时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        ${data
          .map(
            (el) => html`
              <tr>
                <td>
                  <input
                    type="checkbox"
                    data-action="checkRow"
                    data-id="${el.id}"
                    class="form-check-input"
                  />
                </td>
                <td>${el.username}</td>
                <td>${el.email}</td>
                <td>${el.name}</td>
                <td>
                  ${el.avatar
                    ? `<img
                width="50px"
                src="http://127.0.0.1:8090/api/files/_pb_users_auth_/${el.id}/${el.avatar}"
              />`
                    : "无"}
                </td>

                <td>${el.phone}</td>
                <td>${{ 1: "男", 2: "女" }[el.gender]}</td>
                <td>
                  ${el.expand.department ? el.expand.department.label : "无"}
                </td>
                <td>${el.age}</td>
                <td>${new Date(el.created).toLocaleString()}</td>
                <td>${new Date(el.updated).toLocaleString()}</td>
                <td>
                  <button
                    class="btn btn-primary btn-sm"
                    type="button"
                    data-action="editUser"
                    data-id="${el.id}"
                  >
                    编辑
                  </button>

                  <button
                    class="btn btn-danger btn-sm"
                    type="button"
                    data-action="deleteUser"
                    data-id="${el.id}"
                  >
                    删除
                  </button>
                </td>
              </tr>
            `
          )
          .join("")}
      </tbody>
    </table>
  `;
}

export async function getUsersList() {
  const page = localStorage.usersTablePage || 1;
  const filter = window.usersTableFilter || "";
  try {
    const resultList = await pb.collection("users").getList(page, 5, {
      filter,
      sort: "-created",
      expand: "department",
    });

    usersList.innerHTML = renderUsersTable(resultList.items);
    // 分页
    pagination.innerHTML = _pagination(resultList.totalPages, resultList.page);
  } catch (error) {
    console.log(error.message);
  }
}

export const addDialog = _dialog(
  "添加",
  html`
    <form name="addForm">
      <p>
        <label class="form-label">用户名</label>
        <input
          data-action="valid"
          class="form-control"
          type="text"
          name="username"
        />
        <span class="invalid-feedback">用户必须3-18个字符</span>
      </p>
      <p>
        <label class="form-label">头像</label>
        <input
          data-action="addAvatarUpload"
          class="form-control"
          type="file"
          name="avatar"
        />
        <img id="addAvatarThumb" src="" width="100px" />
      </p>
      <p>
        <label class="form-label">密码</label>
        <input
          data-action="valid"
          class="form-control"
          type="password"
          name="password"
        />
        <span class="invalid-feedback">密码不少于8个字符</span>
      </p>
      <p>
        <label class="form-label">确认密码</label>
        <input
          data-action="valid"
          class="form-control"
          type="password"
          name="passwordConfirm"
        />
        <span class="invalid-feedback">两次密码输入不一致</span>
      </p>
      <p>
        <label class="form-label">邮箱</label>
        <input
          data-action="valid"
          class="form-control"
          type="text"
          name="email"
        />
        <span class="invalid-feedback">邮箱格式非法</span>
      </p>
      <p>
        <label class="form-label">姓名</label>
        <input
          data-action="valid"
          class="form-control"
          type="text"
          name="name"
        />
        <span class="invalid-feedback">姓名必须3-18个字符</span>
      </p>
      <p>
        <label class="form-label">手机</label>
        <input
          data-action="valid"
          class="form-control"
          type="text"
          name="phone"
        />
        <span class="invalid-feedback">手机格式非法</span>
      </p>

      <p>
        <label class="form-label">性别</label>

        <input
          type="radio"
          class="form-check-input"
          name="gender"
          value="1"
          checked
        />
        男
        <input type="radio" class="form-check-input" name="gender" value="2" />
        女
      </p>
      <p>
        <label class="form-label">年龄</label>
        <input
          data-action="valid"
          class="form-control"
          type="number"
          name="age"
        />
        <span class="invalid-feedback">年龄必须18-100</span>
      </p>

      <div>
        <label class="form-label">部门</label>
        <div id="addPidRadioList"></div>
      </div>
    </form>
  `,
  html`
    <button data-action="addSaveUser" type="button" class="btn btn-primary">
      确定
    </button>
    <button
      data-action="cancelAddSaveUser"
      type="button"
      class="btn btn-secondary"
    >
      取消
    </button>
  `
);

export const editDialog = _dialog(
  "编辑",
  html`
    <form name="editForm">
      <input type="text" name="id" hidden />
      <p>
        <label class="form-label">用户名</label>
        <input
          data-action="editValid"
          class="form-control"
          type="text"
          name="username"
        />
        <span class="invalid-feedback">用户必须3-18个字符</span>
      </p>

      <p>
        <label class="form-label">头像</label>
        <input
          data-action="editAvatarUpload"
          class="form-control"
          type="file"
          name="avatar"
        />
        <img id="editAvatarThumb" src="" width="100px" />
      </p>

      <p>
        <label class="form-label">邮箱</label>
        <input
          data-action="editValid"
          class="form-control"
          type="text"
          name="email"
        />
        <span class="invalid-feedback">邮箱格式非法</span>
      </p>
      <p>
        <label class="form-label">姓名</label>
        <input
          data-action="editValid"
          class="form-control"
          type="text"
          name="name"
        />
        <span class="invalid-feedback">姓名必须3-18个字符</span>
      </p>
      <p>
        <label class="form-label">手机</label>
        <input
          data-action="editValid"
          class="form-control"
          type="text"
          name="phone"
        />
        <span class="invalid-feedback">手机格式非法</span>
      </p>

      <p>
        <label class="form-label">性别</label>

        <input
          type="radio"
          class="form-check-input"
          name="gender"
          value="1"
          checked
        />
        男
        <input type="radio" class="form-check-input" name="gender" value="2" />
        女
      </p>
      <p>
        <label class="form-label">年龄</label>
        <input
          data-action="editValid"
          class="form-control"
          type="number"
          name="age"
        />
        <span class="invalid-feedback">年龄必须18-100</span>
      </p>
      <div>
        <label class="form-label">部门</label>
        <div id="editPidRadioList"></div>
      </div>
    </form>
  `,
  html`
    <button data-action="editSaveUser" type="button" class="btn btn-primary">
      确定
    </button>
    <button
      data-action="cancelEditSaveUser"
      type="button"
      class="btn btn-secondary"
    >
      取消
    </button>
  `
);
